<template>
  <view class="goods-detail" :style="{height:screenHeight*2+'rpx'}">
    <!-- 状态栏 -->
    <navbar title="商品详情" @getHeight="getHeight" mode="normal"></navbar>
    <!-- 主要内容区 -->
    <swiper :vertical="true" :style="{height:scrollHeight+'px'}" duration="400">
      <!-- 第一部分 -->
      <swiper-item>
        <scroll-view scroll-y class="detail-scroll" :style="{height:scrollHeight+'px'}">
          <!-- 滚动图片 -->
          <uni-swiper-dot :info="fGoods.mainImages" :current="current" mode="" class="swiper-dot"
                          :style="{height:screenWidth+'px'}">
            <swiper class="detail-swiper" :style="{height:screenWidth+'px'}" @change="change">
              <swiper-item v-for="(item,index) in fGoods.mainImages" :key="index"
                           class="detail-swiper-item">
                <image class="detail-swiper-item-image" :src="$urlPrefix+item" mode="aspectFill">
                </image>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
          <!-- 内容 -->
          <view v-if="canShow">
            <goods-deail-bars class="goods-deail-bars" @popSelect="popSelect" :goodsId="goodsId"
                              @popParameter="popParameter" :nowSelectPackageIndex="nowSelectPackageIndex">
            </goods-deail-bars>
          </view>
          <view class="text-up" @click="checkUpText">上滑查看更多详情</view>
        </scroll-view>
      </swiper-item>

      <!-- 第二部分 -->
      <swiper-item>
        <scroll-view scroll-y="true" class="detail-scroll-detail">
          <view
              style="display: flex;align-items: center;justify-content: center;font-size: 28rpx;color: #ccc;">
            详细页面
          </view>
          <text class="scroll-detail-text">{{ fGoods.detailText }}</text>
          <image v-for="item in fGoods.detailImages" :src="$urlPrefix+ item" class="scroll-detail-image"
                 mode="aspectFill">
          </image>
        </scroll-view>
      </swiper-item>
    </swiper>

    <!-- 底部栏 -->
    <view class="detail-bottom-bar" :style="{width: screenWidth*2+'rpx',height:bottomHeight*2+'rpx'}">
      <button class="bottom-push_to_cart" hover-class="bottom-push_to_cart-click"
              @click="pushToCart">加入购物车
      </button>
      <button class="bottom-buy_now" hover-class="bottom-buy_now-click" @click="buyNow">立即购买</button>
    </view>

    <!-- 抽屉 -->
    <min-popup class="min-popup" :show="pop" @close="pop_close">
      <!-- 选择套餐抽屉 -->
      <goods-detail-select-package v-if="popType===0" :goods="fGoods" @selectPackage="selectPackage"
                                   :nowSelectPackageIndex="nowSelectPackageIndex"></goods-detail-select-package>
      <!-- 参数抽屉 -->
      <view v-if="popType===1" style="padding: 20rpx;overflow: hidden;">{{ fGoods.parameter }}</view>
    </min-popup>

  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      screenWidth: 375,
      screenHeight: 667,
      scrollHeight: 0,
      bottomHeight: 50,
      pop: false,
      popType: 0,
      nowSelectPackageIndex: 0,
      page: 0,
      fGoods: {},
      canShow: false,
      goodsId: 23
    };
  },
  onLoad(value) {
    this.goodsId = parseInt(value.id)
    this.getGoods(value.id) //加载页面时通过上一个页面传来的id查询商品
  },
  methods: {
    getGoods(id) {
      this.canShow = false
      this.$request("goods/get", {
        id: id
      }, (res) => {	//通过id查询goods并赋值给fGoods
        this.fGoods = this.$fixGoods(res.data.data)[0]
        this.canShow = true
      })
    },
    change(e) {
      this.current = e.detail.current
    },
    getHeight(e) {
      this.scrollHeight = this.screenHeight - e - this.bottomHeight
    },
    popSelect() {
      //console.log("点击选择套餐");
      this.popType = 0
      this.pop = true
    },
    popParameter() {
      this.popType = 1
      this.pop = true
    },
    pop_close() {
      this.pop = false
    },
    selectPackage(index) {
      this.nowSelectPackageIndex = index
    },
    pushToCart() {
      uni.showLoading({})
      var vue = this
      var userId = uni.getStorageSync("user").id

      //增加用户购物车
      vue.$request("cart/add", {
        userId: userId,
        goodsId: this.fGoods.id
      }, function (res) {
        uni.showToast({
          title: "加入购物车成功",
          icon: "none"
        })
        uni.hideLoading()
      })
    },
    buyNow() {
      //格式化时间
      var date = new Date()
      var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      //创建请求体
      var reqBody = {
        userId: uni.getStorageSync("user").id,
        goodsId: this.fGoods.id,
        goodsNum: 1,
        allPrice: parseFloat(this.fGoods.price) * 1,
        time: dateStr,
        status: 0
      }
      //发送请求创建订单
      this.$request("order/add", reqBody, (res) => {
        if (res.data.code == 200) {
          uni.showModal({
            title: "提示",
            content: "创建订单成功~\n请去“我的”页面下方“待付款”分类中点击付款~\n超过30分钟未付款的订单会被自动取消哦~\n",
            showCancel: false,
            confirmText: "知道了"
          })
        } else {
          uni.showToast({
            icon: "none",
            title: "请求失败"
          })
        }
      })
    },
    checkUpText() {
      this.page = 1
    }
  }
}
</script>

<style lang="scss">
.goods-detail {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  //height: 100%;
  position: relative;
  //border: 2rpx blue solid;

  .detail-scroll {
    //border: 2rpx red solid;
    box-sizing: border-box;
    position: relative;

    .swiper-dot {
      .detail-swiper {
        box-sizing: border-box;
        overflow: hidden;

        .detail-swiper-item {
          .detail-swiper-item-image {
            height: 100%;
            width: 100%;
          }
        }
      }
    }

    .goods-deail-bars {
      height: auto;
    }

    .text-up {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28 rpx;
      color: #ccc;
      width: 100%;
    }

    .detail-scroll-detail {
      height: 100%;
      padding: 0 10 rpx;
      box-sizing: border-box;

      .scroll-detail-image {
        width: 100%;
        //border: 2rpx red solid;
      }
    }

    .min-popup {
    }
  }

  .detail-bottom-bar {
    position: absolute;
    bottom: 0 rpx;
    left: 0 rpx;
    display: flex;
    flex-direction: row;
    //border: 2rpx red solid;

    .bottom-push_to_cart {
      flex: 1;
      background-color: #f06a35;
      color: #fff;
      margin: 0 2 rpx;
    }

    .bottom-push_to_cart-click {
      flex: 1;
      background-color: #bd5329;
      color: #fff;
      margin: 0 2 rpx;
    }

    .bottom-buy_now {
      flex: 1;
      background-color: #5555ff;
      margin: 0 2 rpx;
      color: #fff;
    }

    .bottom-buy_now-click {
      flex: 1;
      background-color: #3f3fbd;
      margin: 0 2 rpx;
      color: #fff;
    }
  }

}
</style>
